<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>函数绘图器</title>  
<style>
canvas{border:#ccc solid 1px;}
fieldset{display:inline;}
#copy{text-align:center;}
</style>
</head>
<body>
<fieldset>
<legend>普通方程</legend>
y=<input type=text id=fx value=x> <input type=color id=cfx value=#0000ff> <input type=button id=bfx value=绘图>
</fieldset>
<fieldset>
<legend>参数方程</legend>
x=<input type=text id=xfa value=200*Math.cos(a)>
y=<input type=text id=yfa value=100*Math.sin(a)> <input type=color id=cfa value=#ff0000> <input type=button id=bfa value=绘图>
</fieldset>
<fieldset>
<legend>极坐标方程</legend>
p=<input type=text id=fq value=300*Math.cos(2*q)> <input type=color id=cfq value=#008000> <input type=button id=bfq value=绘图>
</fieldset>
<input type=button id=cls value=清屏>
<p>
<canvas id="canvas1" width="600" height="600"></canvas>
</p>
<h1>帮助：</h1>
<p>
Math.pow(a,b) a的b次方<br>
Math.random() 0.000000000000000到0.9999999999999999之间的随机数<br>
</p>
<h1>常见方程：</h1>
<ul>
<li>普通方程</li>
<ul>
<li>y=x<sup>n</sup></li>
</ul>
<li>参数方程</li>
<ul>
<li>x=acos&theta; y=bsin&theta; 椭圆</li>
</ul>
<li>极坐标方程</li>
<ul>
<li>玫瑰线：&rho;=a cos n&theta; 或 &rho;=a sin n&theta;</li>
</ul>
</ul>
<h1>关于：</h1>
使用HTML5新功能canvas，进行函数绘图。<br>
作者：黄颖<br>
QQ:84429027
<h2>3.0 (2015-06-02)</h2><ol><li>极坐标方程绘图</li></ol>
<h2>2.0 (2015-06-01)</h2><ol><li>参数方程绘图</li><li>颜色选择功能</li></ol>
<h2>1.0 (2015-05-31)</h2><ol><li>普通方程绘图</li><li>清屏功能</li><li>坐标刻度</li></ol>
<p id=copy>&copy; 2015-2018 海天鹰工作室 版权所有</p>
<script>
var canvas1 = document.getElementById('canvas1');
var ctx = canvas1.getContext('2d');
var x0 = 300;
var pi = 3.14;
canvas1.width = 2*x0 + 20;
canvas1.height = 2*x0 + 20;
cls();

function fx(){
	ctx.beginPath();
	for(x=-x0; x<=x0; x++){
		y = eval(document.getElementById('fx').value);
		if(x == -300) ctx.moveTo(x,-y);
		ctx.lineTo(x,-y);
	}
	ctx.strokeStyle = document.getElementById('cfx').value;
	ctx.stroke();
}

function fa(){
	ctx.beginPath();
	for(a=0; a<=2*pi+0.1; a+=0.1){
		x = eval(document.getElementById('xfa').value);
		y = eval(document.getElementById('yfa').value);
		if(a == 0) ctx.moveTo(x,-y);
		ctx.lineTo(x,-y);
	}
	ctx.strokeStyle=document.getElementById('cfa').value;
	ctx.stroke();
}

function fq(){
	ctx.beginPath();
	for(q=0; q<=2*pi+0.1; q+=0.01){
		p = eval(document.getElementById('fq').value);
		x = p*Math.cos(q);
		y = p*Math.sin(q);
		if(q == 0) ctx.moveTo(x,-y);
		ctx.lineTo(x,-y);
	}
	ctx.strokeStyle = document.getElementById('cfq').value;
	ctx.stroke();
}

function cls(){
	var width = canvas1.width;
	var height = canvas1.height;
	canvas1.width = width;
	canvas1.height = height;
	ctx.translate(x0+10,x0+10); //定义原点位置
	//X轴线
	ctx.beginPath();
	ctx.moveTo(-x0-10,0);
	ctx.lineTo(x0+10,0);
	//X轴箭头
	ctx.lineTo(x0+10-8,-3);
	ctx.moveTo(x0+10,0);
	ctx.lineTo(x0+10-8,3);
	//X轴刻度
	ctx.textAlign="right";
	for(x=-x0;x<=x0;x+=100){
		if(x!=0){
			ctx.moveTo(x,0);
			ctx.lineTo(x,-10);
		}
		ctx.fillText(x,x+10,10+5);
	}
	
	ctx.fillText('X',x0+3,-15);
	//Y轴线
	ctx.moveTo(0,x0+10);
	ctx.lineTo(0,-x0-10);
	//Y轴箭头
	ctx.lineTo(3,-x0-10+8);
	ctx.moveTo(0,-x0-10);
	ctx.lineTo(-3,-x0-10+8);
	//Y轴刻度
	for(y=-x0;y<=x0;y+=100){
		if(y!=0){
			ctx.moveTo(0,-y);
			ctx.lineTo(10,-y);
			ctx.fillText(y,-5,-y+5);
		}
	}
	ctx.fillText('Y',0+20,-x0+5);
	ctx.stroke();
}
document.getElementById('bfx').addEventListener('click',function(){ fx(); },false);
document.getElementById('bfa').addEventListener('click',function(){ fa(); },false);
document.getElementById('bfq').addEventListener('click',function(){ fq(); },false);
document.getElementById('cls').addEventListener('click',function(){ cls(); },false);
</script>
</body> 
</html>